<template>
  <view class="page">
    <button
      type="default"
      @tap="save"
      style="
        width: 60%;
        background-color: #007aff;
        color: #fff;
        margin-bottom: 60rpx;
      "
    >
      保存
    </button>
    <view class="timeTips">{{ calcTime }}后响铃</view>
    <!-- 事件选择器 -->
    <view class="uni-padding-wrap">
      <view class="uni-title">
        选择时间: {{ noon }}{{ hour }}时{{ minute }}分
      </view>
    </view>
    <picker-view
      v-if="visible"
      :indicator-style="indicatorStyle"
      v-model="selectTimes"
      @change="bindChange"
      class="picker-view"
    >
      <picker-view-column>
        <view class="item" v-for="(item, index) in noons" :key="index">
          {{ item }}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in hours" :key="index">
          {{ item }}时
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in minutes" :key="index">
          {{ item }}分
        </view>
      </picker-view-column>
    </picker-view>
    <!-- 选择铃声 -->
    <view class="ringBox">
      <view class="ringTitle">选择铃声</view>
      <view class="ringList">
        <view class="ringItem" @click="toSelectRing">
          <view class="box">
            <view class="ringIcon">
              <image class="image" src="../../static/music.png" />
            </view>
            <view class="ringName">
              <view class="name">选择铃声</view>
              <view class="arrow"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 其它 -->
    <view class="other">
      <view class="otherTitle">其它</view>
      <view class="selectBox">
        <view class="selectItem">
          <div class="left">重复</div>
          <!-- <div class="right">法定工作日</div> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getFile, setAlarm, setAlarm1 } from "../../utils/utils";
export default {
  components: {},
  data: function () {
    const hours = [];
    const minutes = [];
    for (let i = 1; i <= 12; i++) {
      hours.push(i);
    }
    for (let i = 0; i < 60; i++) {
      minutes.push(i);
    }
    return {
      title: "picker-view",
      noons: ["上午", "下午"],
      hours: hours.concat(hours),
      minutes,
      noon: "",
      hour: "",
      minute: "",
      selectTimes: [0, 0, 0],
      visible: true,
      indicatorStyle: `height: 50px;`,
      ringId: "1",
    };
  },
  computed: {
    calcTime() {
      let date = new Date();
      let hours = date.getHours();
      let miniuns = date.getMinutes();

      const curHour = this.selectTimes[1];
      // console.log('curHour: ', curHour)
      let calcHour = curHour - hours;
      let calcMin = this.selectTimes[2] - miniuns;
      if (calcHour < 0) {
        calcHour = 24 + calcHour;
      }
      if (calcMin < 0) {
        calcMin = 60 + calcMin;
      }
      return calcHour + "小时" + calcMin + "分钟";
    },
  },
  onLoad() {
    this.noon = this.noons[this.selectTimes[0]];
    this.hour = this.hours[this.selectTimes[1]];
    this.minute = this.minutes[this.selectTimes[2]];
  },
  methods: {
    bindChange(e) {
      const val = e.detail.value;
      this.selectTimes = val;
      this.noon = this.noons[val[0]];
      this.hour = this.hours[val[1]];
      this.minute = this.minutes[val[2]];

      // if (val[0] === 1) this.selectTimes[1] = 12 + this.selectTimes[1]
      // else {
      //   if (this.selectTimes[1] > 11)
      //     this.selectTimes[1] = this.selectTimes[1] - 12
      //   // else this.selectTimes[1] = this.selectTimes[1]
      // }

      if (val[1] > 11) this.selectTimes[0] = 1;
      else this.selectTimes[0] = 0;
    },
    toSelectRing() {
      uni.navigateTo({
        url: "/pages/selectRing/index",
      });
    },
    save() {
      console.log("save: ", this.selectTimes);
      const params = {
        setTime: this.selectTimes,
        type: 1,
        mark: "干啥",
      };
      setAlarm(this.selectTimes[1], this.selectTimes[2], "小楼一夜听春雨");
      uni.showToast({
        title: "设置成功了吗?",
        duration: 2000,
      });
      uni.$emit('myNewAddressData', {
        myNewAddressData: JSON.stringify(params),
      })
      plus.storage.setItem('clockList', JSON.stringify(this.ringList))
      uni.navigateBack({
        delta: 5,
      })
    },
  },
};
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  padding: 0.5em;
  .timeTips {
    text-align: center;
  }
  .uni-padding-wrap {
    text-align: center;
  }
}
.picker-view {
  height: 600rpx;
  margin-top: 20rpx;
}
.item {
  height: 50px;
  line-height: 50px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ringBox {
  margin: 40rpx 0;
  .ringTitle {
    font-size: 20rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  .ringList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .ringItem {
      width: 200rpx;
      height: 200rpx;
      border: 6rpx solid skyblue;
      border-radius: 20rpx;
      padding: 6rpx;
      &:hover {
        transform: scale(1.1);
      }
      .box {
        width: 100%;
        height: 100%;
        text-align: center;
        box-sizing: border-box;
        border-radius: 20rpx;
        color: #fff;
        cursor: pointer;
        background-color: blueviolet;

        .ringName {
          width: 100%;
          font-size: 30rpx;
          display: flex;
          justify-content: space-between;
          .name {
            flex: 1;
          }
          .arrow {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background-color: rgba(202, 156, 245, 0.5);
            text-align: center;
            &::after {
              color: #4cd964;
              content: " ";
              display: block;
              width: 10rpx;
              height: 10rpx;
              margin: 10rpx 6rpx;
              border-width: 4rpx;
              border-style: solid;
              border-right-color: #fff;
              border-top-color: #fff;
              border-left-color: transparent;
              border-bottom-color: transparent;
              transform: rotate(45deg);
            }
          }
        }
        .ringIcon {
          width: 80rpx;
          height: 150rpx;
          line-height: 150rpx;
          margin: 0 auto;
          border-radius: 6rpx;
          align-items: center;
          justify-content: center;
          .image {
            margin-top: 20rpx;
            width: 100%;
            height: 80rpx;
          }
        }
      }
    }
  }
}
.other {
  margin: 40rpx 0;
  .otherTitle {
    font-size: 20rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  .selectBox {
    margin-bottom: 40rpx;
    .selectItem {
      height: 80rpx;
      line-height: 80rpx;
      .left {
        color: #333;
        &::after {
          float: right;
          content: " ";
          display: block;
          width: 10rpx;
          height: 10rpx;
          margin: 28rpx 6rpx 0 0;
          border-width: 4rpx;
          border-style: solid;
          border-right-color: #999;
          border-top-color: #999;
          border-left-color: transparent;
          border-bottom-color: transparent;
          transform: rotate(45deg);
        }
      }
    }
  }
}
</style>
